@use 'sass:math';

// 宽度和高度
.w-full {
	width: 100%;
}
.h-full {
	height: 100%;
}

@for $i from 1 through 50 {
	.w-#{$i} {
		width: #{$i * 8}rpx;
	}
	.h-#{$i} {
		height: #{$i * 8}rpx;
	}
}

// 定位
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.relative {
	position: relative;
}
.sticky {
	position: sticky;
}

@for $i from 0 through 20 {
	.top-#{$i} {
		top: #{$i}px;
	}
	.bottom-#{$i} {
		bottom: #{$i}px;
	}
	.left-#{$i} {
		left: #{$i}px;
	}
	.-left-#{$i} {
		left: -#{$i}px;
	}
	.right-#{$i} {
		right: #{$i}px;
	}
}

// 文字样式
.font-bold {
	font-weight: 700;
}

.text-xs {
	font-size: 12px;
	line-height: math.div(1, 0.75);
}
.text-sm {
	font-size: 14px;
	line-height: math.div(1.25, 0.875);
}
.text-md {
	font-size: 14px;
	line-height: math.div(1.25, 0.875);
}
.text-base {
	font-size: 16px;
	line-height: math.div(1.5, 1);
}
.text-lg {
	font-size: 18px;
	line-height: math.div(1.75, 1.125);
}
.text-xl {
	font-size: 20px;
	line-height: math.div(1.75, 1.25);
}
.text-2xl {
	font-size: 24px;
	line-height: math.div(2, 1.5);
}
.text-3xl {
	font-size: 30px;
	line-height: math.div(2.25, 1.875);
}
.text-4xl {
	font-size: 36px;
	line-height: math.div(2.5, 2.25);
}
.text-5xl {
	font-size: 48px;
	line-height: math.div(1, 1);
}
.text-6xl {
	font-size: 60px;
	line-height: math.div(1,1);
}

.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-nowrap {
	text-wrap: nowrap;
}

// 圆角
.rounded-xs {
	border-radius: 2px;
}
.rounded-sm {
	border-radius: 4px;
}
.rounded-md {
	border-radius: 6px;
}
.rounded-lg {
	border-radius: 8px;
}
.rounded-xl {
	border-radius: 12px;
}
.rounded-2xl {
	border-radius: 16px;
}
.rounded-full {
	border-radius: 1000px;
}

// 间距
@for $i from 1 through 40 {
	.gap-#{$i} {
		gap: #{$i + 6}px;
	}
}

// 颜色
.text-black {
	color: #000000;
}
.text-white {
	color: #ffffff;
}

@for $i from 1 through 100 {
	.text-black__#{$i} {
		color: #000000#{$i + 10};
	}
}

// 边框
.border {
	border: 1px solid #000000;
}
.border-b {
	border-bottom: 1px solid #000000;
}
.border-t {
	border-top: 1px solid #000000;
}

@for $i from 1 through 1000 {
	.border-slate-#{$i} {
		border: 1px solid #000000#{math.div($i, 10)};
	}
}

@for $i from 1 through 100 {
	.border-black__#{$i} {
		border-color: #000000#{$i + 10};
	}
}

// 内边距
.p-auto {
	padding: auto;
}

@for $i from 1 through 40 {
	.p-#{$i} {
		padding: #{$i * 8}rpx;
	}
	.px-#{$i} {
		padding-left: #{$i * 8}rpx;
		padding-right: #{$i * 8}rpx;
	}
	.py-#{$i} {
		padding-top: #{$i * 8}rpx;
		padding-bottom: #{$i * 8}rpx;
	}
	.pl-#{$i} {
		padding-left: #{$i * 8}rpx;
	}
	.pr-#{$i} {
		padding-right: #{$i * 8}rpx;
	}
	.pt-#{$i} {
		padding-top: #{$i * 8}rpx;
	}
	.pb-#{$i} {
		padding-bottom: #{$i * 8}rpx;
	}
}

// 外边距
.m-auto {
	margin: auto;
}

@for $i from 1 through 40 {
	.m-#{$i} {
		margin: #{$i * 8}rpx;
	}
	.mx-#{$i} {
		margin-left: #{$i * 8}rpx;
		margin-right: #{$i * 8}rpx;
	}
	.my-#{$i} {
		margin-top: #{$i * 8}rpx;
		margin-bottom: #{$i * 8}rpx;
	}
	.ml-#{$i} {
		margin-left: #{$i * 8}rpx;
	}
	.mr-#{$i} {
		margin-right: #{$i * 8}rpx;
	}
	.mt-#{$i} {
		margin-top: #{$i * 8}rpx;
	}
	.mb-#{$i} {
		margin-bottom: #{$i * 8}rpx;
	}
}

// 弹性布局
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-col {
	flex-direction: column;
}
.flex-row {
	flex-direction: row;
}

.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}

.items-center {
	align-items: center;
}
.items-start {
	align-items: flex-start;
}
.items-end {
	align-items: flex-end;
}

// 溢出处理
.overflow-auto {
	overflow: auto;
}
.box-border {
	box-sizing: border-box;
}
.whitespace-nowrap {
	white-space: nowrap;
}
.break-all {
	word-break: break-all;
}
.wrap-break-word {
	overflow-wrap: break-word;
}
.cursor-pointer{
	cursor: pointer;
}
.bg-white{
	background-color: #fff;
}
.bg-black{
	background-color: #000;
}
